<template>
	<view class="adress">
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="地址管理"  status-bar @clickLeft="back" :border="false"/>
		
		<u-empty
				mode="address"
				icon="http://cdn.uviewui.com/uview/empty/address.png"
				width="320"
				height="320"
				textSize="28"
				:show="adresses.length == 0 ? true : false"
		>
		</u-empty>
		
		<scroll-view class="list">
			<view class="item" v-for="(item,index) in adresses" :key="index">
				<view class="info">
					<view class="msg" >
						<view class="top">	
							<uni-tag  :text="item.label" type="primary" 
							custom-style="background-color: #E1F1FE; border-color: #E1F1FE; color:#333333"/> 
							<view class="">
								<text style="margin-left: 18rpx;">{{item.detail}}\n</text>
								<text style="margin-left: 18rpx; font-size: 22rpx; color: #999;">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
							</view>
						</view>
						<view class="mid" >
							{{item.consignee}} {{item.sex}} {{item.phone}}
						</view>
					</view>
					<view class="bt" style="margin-right: 20rpx;margin-top: 25rpx;" @click="gotoAdressAdd(item)">
						<uni-icons color="#9B9B9B" type="compose" size="24" ></uni-icons>
					</view>
				</view>
				<view class="line" style="width: 95%;">
					<u-line margin="20rpx 20rpx"></u-line>
				</view>
				<view class="default" @click="radioChange(item)">
					<label class="radio">
						<radio :value="item.id" :checked="item.isDefault == 1" color="#007AFF" style="transform:scale(0.7);"/><text >设为默认地址</text>
					</label>
				</view>
			</view>
		</scroll-view>
		<uni-fab ref="fab" :pattern="pattern"  :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" @fabClick="fabClick" :popMenu="false"/>
					
	</view>
</template>

<script>
import {addressList,setDefaultAddress} from "@/api/adress.js"
	export default {
		data() {
			return {
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
							color: '#7A7E83',
							backgroundColor: '#fff',
							selectedColor: '#007AFF',
							buttonColor: '#007AFF',
							iconColor: '#fff'
						},
				adresses:[
					{
						id:0,
						consignee:'在上课',
						phone:'15991816561',
						default:true,
						sex:0,
						label:'家',
						provinceName:'',
						cityName:'',
						districtName:'',
						detail:'',
						isDefault:1
					},
					{
						id:1,
						consignee:'在上课',
						phone:'15991816561',
						default:true,
						sex:0,
						label:'家',
						provinceName:'',
						cityName:'',
						districtName:'',
						detail:'',
						isDefault:0
					}
				]
			}
		},
		onReady(){
			this.init()
		},
		onShow(){
			this.init()
		},
		methods: {
		init(){
			this.adresses = []
			addressList().then(res=>{
				this.adresses = res.data
			}).catch(err=>{
				uni.showToast({
					title:err
				})
			})
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		fabClick() {
				uni.navigateTo({
					url:'/pages/adressAdd/adressAdd'
				})
			},
		radioChange(item) {
			let id = item.id
			if(item.isDefault == 1){
				return
			}
			else{
				item.isDefault = 1
				this.adresses.forEach((item)=>{
					if(item.id != id)
						item.isDefault = 0
				})
				setDefaultAddress(item).then(res=>{
					
				}).catch(err=>{
					// console.log(err.errMsg)
					uni.showToast({
						title:err,
						icon:'error'
					})
				})

			}


		  },
		gotoAdressAdd(item){
			console.log(item)
			uni.navigateTo({
				url:'/pages/adressAdd/adressAdd?address='+encodeURIComponent(JSON.stringify(item)),
				
			})
		}
		}
	}
</script>

<style scoped>
	.warp {
		padding: 10px;
	}

	.button {
		margin-bottom: 10px;
	}
	
	.list{
		
	}
	
	.item{
		background-color: white;
		width: 95%;
		margin-top: 25rpx;
		margin-left: 20rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}
	
	.info{
		display: flex;

		justify-content: space-between;
	}
	.default{
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}
	.msg{
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 400;
	}
	.top{
		
		color: #333333;
		display: flex;
		align-items: center;
/* 		text-overflow: ellipsis;
		white-space: nowrap; */
	}
	.mid{
		margin-top: 20rpx;
		color: #999999;
	}
</style>
